<template>
  <div>
    <el-dialog
      title="取消订单"
      :visible.sync="dialogShow"
      width="590px"
      height="420px"
      @close="closeDialog"
      center
      custom-class="dialogNoPadding dialogFontGray"
    >
      <div class="cancel_Order_Box">
        <el-form :model=" orderInfo">
          <el-form-item label="订单号:">
            <span>{{orderInfo.orderId}}</span>
          </el-form-item>
          <el-form-item label="取消缘由:">
            <el-radio-group class="cancel_radio" v-model="orderInfo.reason">
              <el-radio v-for="(item,index) in reasonList " :key="index" :label="item.reason"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="orderInfo.reason == '其它原因'">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              width="240px"
              height="640px"
              maxlength="100"
              v-model="orderInfo.desc"
            ></el-input>
          </el-form-item>
          <el-button class="cancelOrder_button" @click="submitDialog">确定</el-button>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { orderCancelOrder } from "../../../../../requestApi/order/allOrder";
export default {
  props: ["showTrue", "orderData"],
  data() {
    return {
      dialogShow: false,
      reasonList: [
        { reason: "无法备齐货物" },
        { reason: "不是有效订单" },
        { reason: "买家主动要求" },
        { reason: "其它原因" }
      ],
      orderInfo: {
        orderId: "",
        reason: "无法备齐货物",
        desc: ""
      }
    };
  },
  filters: {},
  watch: {
    showTrue(val) {
      let self = this;
      self.dialogShow = val;
      if (self.dialogShow) {
        self.$nextTick(() => {
          self.dataBackfillFun();
        });
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    /* 数据回填  start */
    dataBackfillFun() {
      this.orderInfo = {
        orderId: this.orderData ? this.orderData.orderId || "" : "",
        reason: "无法备齐货物",
        desc: ""
      };
    },
    /* 数据回填  end */
    closeDialog() {
      this.$emit("close");
    },
    /* 提交  start */
    submitDialog() {
      this.orderCancelOrderFun();
    },
    async orderCancelOrderFun() {
      let self = this;
      let orderInfo = {
        orderId: this.orderInfo.orderId,
        reason:
          this.orderInfo.reason == "其它原因"
            ? this.orderInfo.desc
              ? this.orderInfo.desc
              : this.orderInfo.reason
            : this.orderInfo.reason
      };
      let params = {
        ...orderInfo,
        grade: sessionStorage.getItem("grade")
      };
      let res = await orderCancelOrder(params);
      if (res.status == 200) {
        self.dialogShow = false;
        if (res.data.flag) {
          self.$message({
            type: "success",
            message: "取消订单成功！"
          });
        } else {
          self.$message({
            type: "error",
            message: "取消订单失败！"
          });
        }
      } else {
        this.baseMessage();
      }
    }
    /* 提交  end */
  }
};
</script>

<style scoped rel="stylesheet">
.cancel_Order_Box {
  padding: 20px 137px 40px 137px;
}
.cancel_radio {
  display: inline-block;
  width: 120px;
  line-height: 30px;
  padding-top: 8px;
}
.cancelOrder_button {
  display: block;
  margin: 0 auto;
  width: 108px;
  height: 32px;
  background: rgba(235, 68, 38, 1);
  border-radius: 2px;
  color: #fff;
}
</style>
